<template>
  <ul class="navs">
    <li class="home">
      <RouterLink to="/">首页</RouterLink>
    </li>
    <li v-for="item in list" :key="item.id" @mouseenter="show(item)" @mouseleave="hide(item)">
      <RouterLink :to="`/category/${item.id}`" @click="hide(item)">{{item.name}}</RouterLink>
      <div class = "layer" :class="{open:item.open}">
        <ul>
          <li v-for="sub in item.children" :key="sub.id">
            <RouterLink :to="`/category/sub/${sub.id}`" @click="hide(item)">
              <div class="imgbox">
                <img :src="sub.picture" alt="" />
              </div>
              <p>{{sub.name}}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
  name: 'navs',
  setup () {
    const store = useStore()
    const list = computed(() => {
      return store.state.category.list
    })
    const show = (item) => {
      store.commit('category/show', item)
    }
    const hide = (item) => {
      store.commit('category/hide', item)
    }
    return { list, show, hide }
  }
}
</script>
<style lang="less">
.navs {
  font-size: 16px;
  flex: 1;
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 998;
  li {
    &:hover {
      > a {
        color: @xtxColor;
        border-bottom: 1px solid @xtxColor;
      }
      > .layer {
          height: 132px;
          // opacity: 1;
          display: block;
      }
    }
    .layer {
        width: 1240px;
        background-color: #fff;
        position: absolute;
        top: 100px;
        left: -200px;
        //   height: 0;
        overflow: hidden;
        display: none;
        box-shadow: 0 0 5px #ccc;
        transition: all 0.2s 0.1s;
        ul {
          display: flex;
          flex-wrap: wrap;
          padding: 0 70px;
          align-items: center;
          height: 132px;
          line-height: 132px;
          li {
            width: 110px;
            height: 132px;
            text-align: center;
            display: flex;
            padding-top: 15px;
            justify-content: start;
            align-items: center;
            .imgbox {
              width: 60px;
              height: 60px;
            }

            p {
              padding-top: 1px;
            }
            &:hover {
              p {
                color: @xtxColor;
              }
            }
          }
        }
    }
  }
}
</style>
